<template>
	<view class="userLayout pageBg" v-if="!userinfo">
		<view :style="{height:getNavBarHeight() + 'px'}"></view>

		<view class="userInfo">
			<view class="avatar">
				<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatarUrl" mode="aspectFill"></image>
				</button>
			</view>
			<view class="name">昵称：<input type="nickname" :value="nickname" placeholder="请输入昵称" /></view>

			<!-- <view class="ip">{{userinfo.IP  }}</view>
			<view class="address"> 来自：{{userinfo.address.city ||userinfo.address.province||userinfo.address.country}}
			 -->
			<view class="ip">198.255.255.255</view>
			<view class="address"> 来自：中国
			</view>
		</view>
		<view class="section">
			<view class="list">
				<navigator url="/pages/claaslist/claaslist?name=我的下载&type=download" class="row">
					<view class="left">
						<uni-icons type="download-filled" size="20"></uni-icons>
						<view class="text">下载</view>
					</view>
					<view class="right">
						<!-- <view class="text">{{userinfo.downloadSize}}</view> -->
						<view class="text">0</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>



				<navigator url="/pages/claaslist/claaslist?name=我的评分&type=score" class="row">
					<view class="left">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<view class="text">我的评分</view>
					</view>
					<view class="right">
						<!-- <view class="text">{{userinfo.scoreSize}}</view> -->
						<view class="text">0</view>
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</navigator>

				<view class="row">
					<view class="left">
						<uni-icons type="chatboxes-filled" size="20"></uni-icons>
						<view class="text">联系他</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
					<!-- #ifdef MP -->
					<button open-type="contact">联系他</button>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<button @click="clickContact">拨打电话</button>
					<!-- #endif -->

				</view>

			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="row" @click="dy">
					<view class="left">
						<uni-icons type="notification-filled" size="20"></uni-icons>
						<view class="text">订阅更新</view>
					</view>
					<view class="right">

						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>

				<view class="row" @click="cj">
					<view class="left">
						<uni-icons type="flag-filled" size="20"></uni-icons>
						<view class="text">常见问题</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="15" color="#aaa"></uni-icons>
					</view>
				</view>

			</view>
		</view>

	</view>

	<view class="loadingLayout" v-else>
		<view :style="{height:getNavBarHeight() + 'px'}"></view>
		<uni-load-more status="loading"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		getNavBarHeight
	} from '@/utils/system.js'
	import {
		getUserInfo
	} from '@/api/apis.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad,

	} from '@dcloudio/uni-app';
	const userinfo = ref(null)
	const nickname = ref('')

	const avatarUrl = ref('../../static/logo.png')

	onLoad(() => {
		// showUserInfo()
		// console.log(1)
	})
	onMounted(() => {
		uni.showModal({
			title: '更换头像',
			content: '更换头像可以点击默认头像,可以重新输入昵称',
			showCancel: false
		});
	})
	// const showUserInfo = () => {
	// 	getUserInfo().then(res => {
	// 		// console.log(res)
	// 		// userinfo.value = res.data
	// 	})
	// }

	const clickContact = () => {
		uni.makePhoneCall({
			phoneNumber: "114"
		})
	}

	const onChooseAvatar = e => {
		console.log(e)
		avatarUrl.value = e.detail.avatarUrl
	}

	const dy = () => {
		uni.showToast({
			title: '没开发',
			duration: 2000
		});
	}

	const cj = () => {
		uni.showToast({
			title: '没开发',
			duration: 2000
		});
	}
</script>

<style lang="scss" scoped>
	.userLayout {
		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column; //换行
			padding: 50rpx 0;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden; //父级加  不然图片覆盖

				button {
					width: 100%;
					height: 100%;
					padding: 0; //移除按钮的内边距
					border: none; //移除边框
					background: none; //移除背景
					cursor: pointer; //显示鼠标
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover; //超出部分会被裁剪
					}
				}



			}

			.name {
				display: flex;
				padding-left: 40%;
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 30rpx;
				color: #aaa;
			}

		}

		.section {
			width: 690rpx;
			margin: 50rpx auto;
			border: 1px solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05); //阴影

			.list {
				.row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					height: 100rpx;
					border-bottom: 1px solid #eee;
					position: relative;
					background: #fff;

					&:last-child {
						border-bottom: 0;
					}

					.left {
						display: flex;
						align-items: center;

						//穿透 
						:deep() {
							.uni-icons {
								color: $brand-theme-color !important; //最高权限 h5
							}
						}

						.text {
							padding-left: 20rpx;
							color: #666;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #aaa;
						}
					}

					button {
						position: absolute;
						top: 0;
						left: 0;
						height: 100rpx;
						width: 100%;
						opacity: 0; //透明
					}
				}
			}
		}

	}
</style>